<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>文章编辑</title>
	<link rel="stylesheet" th:href="@{/layui/css/layui.css}"
		  href="../../static/layui/css/layui.css"/>
	<link rel="stylesheet" th:href="@{/styles/home.css}"
		  href="../../static/styles/home.css"/>
	<link rel="stylesheet" th:href="@{/styles/articles/index.css}"
		  href="../../static/styles/articles/index.css"/>
	<link rel="stylesheet" th:href="@{/resources/editor.md/css/editormd.css}"
		  href="../../static/resources/editor.md/css/editormd.css"/>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
	<script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/popper.js/1.14.3/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin">

	<div th:replace="/share/_header :: header(1)"></div>

	<div class="layui-body body-content">
		<div role="main" class="container" style="margin-top: 1rem;">
			<div class="row">
				<div class="col-sm-9 blog-main">
					<form id="editArticle" action="/articles" method="post" onsubmit="return saveArticle();">
						<input type="hidden" name="editMode" value="MARKDOWN">
						<input type="hidden" name="userId" value="1">
						<div class="form-group">
							<label for="title">标题</label>
							<input type="text" class="form-control" name="title" id="title" placeholder="title">
						</div>
						<div class="form-group">
							<label for="content">内容</label>
							<div id="editormd">
								<textarea class="form-control" name="content" id="content" rows="3"></textarea>
							</div>
						</div>
						<button type="submit" class="btn btn-primary">Submit</button>
					</form>
				</div>

				<aside class="col-sm-3 ml-sm-auto blog-sidebar" style="padding-top: 1rem;">
					<div class="sidebar-module sidebar-module-inset">
						<h4>发文须知</h4>
						<p>
							Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras
							mattis consectetur purus sit amet fermentum. Aenean lacinia
							bibendum nulla sed consectetur.
						</p>
					</div>
					<div class="sidebar-module">
						<h4>Archives</h4>
						<ol class="list-unstyled">
							<li><a href="#">March 2014</a></li>
							<li><a href="#">February 2014</a></li>
							<li><a href="#">January 2014</a></li>
							<li><a href="#">December 2013</a></li>
							<li><a href="#">November 2013</a></li>
							<li><a href="#">October 2013</a></li>
						</ol>
					</div>
					<div class="sidebar-module">
						<h4>Elsewhere</h4>
						<ol class="list-unstyled">
							<li><a href="#">GitHub</a></li>
							<li><a href="#">Twitter</a></li>
							<li><a href="#">Facebook</a></li>
						</ol>
					</div>
				</aside>
			</div>
		</div>
	</div>
</div>

<script th:src="@{/layui/layui.js}" src="../../static/layui/layui.js" charset="utf-8"></script>
<script th:src="@{/resources/editor.md/editormd.js}" src="../../static/resources/editor.md/editormd.js"
		charset="utf-8"></script>
<script type="text/javascript">
	layui.use(['element', 'layer']);

	var editor = editormd("editormd", {
		width: "100%",
		height: 520,
		path: "/resources/editor.md/lib/",
		htmlDecode: "style,script,iframe",
		tex: true,
		taskList: true,
		flowChart: true,
		sequenceDiagram: true,
		watch: false,
		emoji: true,
		saveHTMLToTextarea: true,
		imageUpload: true,
		imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
		toolbarIcons: function () {
			return [
				"undo", "redo", "|",
				"bold", "del", "italic", "quote", "|",
				"h1", "h2", "h3", "h4", "h5", "h6", "|",
				"list-ul", "list-ol", "hr", "|",
				"image", "link", "code", "code-block", "emoji", "||",
				"fullscreen", "watch", "preview", "clear"
			]
		}
	});

	function saveArticle() {
		var form = event.target;
		if (form.title.value.length === 0) {
			layui.layer.msg('文章标题不能为空');
			return false;
		}
		// console.log(form.content.value);
		if (form.content.value.length === 0) {
			layui.layer.msg('文章内容不能为空');
			return false;
		}

		return true;
	}
</script>
</body>
</html>